<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
		<title>summer</title>
		<link rel="stylesheet" type="text/css" href="{{ asset('/bootstrap/css/bootstrap.css') }}">
		<link rel="stylesheet" type="text/css" href="{{ asset('/css/font-awesome.min.css') }}">
		<link rel="stylesheet" type="text/css" href="{{ asset('/css/bootsnav.css') }}">
		<style type="text/css">
			 body{ background-color:hsla(120,30%,80%,1.00) }
			.jq22-header h1{ text-align:center; font-size:28px; color:#939393 }
			.navbar-brand{
				padding: 29px 15px;
				height: auto;
			}
			nav.navbar.bootsnav{
				border: none;
				margin-bottom: 15px;
			}
			.navbar-nav{
				float: left;
			}
			nav.navbar.bootsnav ul.nav > li > a{
				color: #474747;
				text-transform: uppercase;
				padding: 30px;
			}
			nav.navbar.bootsnav ul.nav > li:hover{
				background: #f4f4f4;
			}
			.nav > li:after{
				content: "";
				width: 0;
				height: 5px;
				background: #34c9dd;
				position: absolute;
				bottom: 0;
				left: 0;
				transition: all 0.5s ease 0s;
			}
			.nav > li:hover:after{
				width: 100%;
			}
			nav.navbar.bootsnav ul.nav > li.dropdown > a.dropdown-toggle:after{
				content: "+";
				font-family: 'FontAwesome';
				font-size: 16px;
				font-weight: 500;
				position: absolute;
				top: 35%;
				right: 10%;
				transition: all 0.4s ease 0s;
			}
			nav.navbar.bootsnav ul.nav > li.dropdown.on > a.dropdown-toggle:after{
				content: "\f105";
				transform: rotate(90deg);
			}
			.dropdown-menu.multi-dropdown{
				position: absolute;
				left: -100% !important;
			}
			nav.navbar.bootsnav li.dropdown ul.dropdown-menu{
				box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
				border: none;
			}
			@media only screen and (max-width:660px){
				nav.navbar.bootsnav ul.nav > li.dropdown > a.dropdown-toggle:after,
				nav.navbar.bootsnav ul.nav > li.dropdown.on > a.dropdown-toggle:after{ content: " "; }
				.dropdown-menu.multi-dropdown{ left: 0 !important; }
				nav.navbar.bootsnav ul.nav > li:hover{ background: transparent; }
				nav.navbar.bootsnav ul.nav > li > a{ margin: 0; }
			}
			.video{
				width:90%;
				height:200px;
				margin:0 auto;
				margin-top:15px;
			} 
			.video div{
				border:1px solid yellow;
				float:left;
				width:27.6%;
				height:200px;
				margin-left:4.1%;
				text-align:center;
			}
			@media only screen and (max-width:660px) {
				.video div{
					border:1px solid yellow;
					width:100%;
					float:left;
					height:200px;
					margin:0 auto;
					margin-bottom:8%;
				}
		 
			}
		</style>
	
	</head>
    <body>
		
		<!--  导航  -->
		<div class="jq22-container">
			<div class="demo" style="padding: 2em 0;">
				<div class="container">
					<div class="row">
						<div class="col-md-12">
							<nav class="navbar navbar-default navbar-mobile bootsnav">
								<div class="navbar-header">
									<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
										<i class="fa fa-bars"></i>
									</button>
								</div>
								<div class="collapse navbar-collapse" id="navbar-menu" >
									<ul class="nav navbar-nav" data-in="fadeInDown" data-out="fadeOutUp">
										<li><a href="#" style="font-size:25px;color:#FFA07A;" >欢迎来到夏天世界</a></li>
										<li><a href="#">手机</a></li>
										<li><a href="#">电脑</a></li>
										<li><a href="#">相机</a></li>
										<li class="dropdown">
											<a href="#" class="dropdown-toggle" data-toggle="dropdown">国家</a>
											<ul class="dropdown-menu">
												<li><a href="#">澳大利亚</a></li>
												<li class="dropdown">
													<a href="#" class="dropdown-toggle" data-toggle="dropdown" >中国</a>
													<ul class="dropdown-menu">
														<li><a href="#">云南</a></li>
														<li><a href="#">海南</a></li>
														<li class="dropdown">
															<a href="#" class="dropdown-toggle" data-toggle="dropdown" >北京</a>
															<ul class="dropdown-menu multi-dropdown">
																<li><a href="#">朝阳区</a></li>
																<li><a href="#">昌平区</a></li>
															</ul>
														</li>
													</ul>
												</li>
											</ul>
										</li>
										<li><a href="#">联系我们</a></li>
									</ul>
								</div>
							</nav>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		
		<!--  视频单块  -->
		<div class="video">
			<div><img style="width:100%;height:100%;" src="{{ asset('/images/test.jpg') }}" /></div>
			<div><img style="width:100%;height:100%;" src="{{ asset('/images/test.jpg') }}" /></div>
			<div><img style="width:100%;height:100%;" src="{{ asset('/images/test.jpg') }}" /></div>
		</div>
		
		<!--  视频单块  -->
		<div class="video">
			<div><img style="width:100%;height:100%;" src="{{ asset('/images/test.jpg') }}" /></div>
			<div><img style="width:100%;height:100%;" src="{{ asset('/images/test.jpg') }}" /></div>
			<div><img style="width:100%;height:100%;" src="{{ asset('/images/test.jpg') }}" /></div>
		</div>
		
		<!-- 适应移动版 -->
		<script type="text/javascript" src="{{ asset('/js/jquery-1.10.2.js') }}"></script>
		<script type="text/javascript" src="{{ asset('/js/bootsnav.js') }}"></script>
		<script src="{{ asset('/bootstrap/js/bootstrap.js') }}"></script>
		
     
    </body>
</html>
